<template>
  <div class="digital-human">
    <!-- 视频元素-->
    <video ref="videoElement" src="../assets/video/pause.webm" muted preload="auto" playsinline
           @loadeddata="handleVideoLoadedData" @ended="handleVideoEnded"></video>
    <!-- 音频控件 -->
    <audio ref="audioElement" controls></audio>
    <!-- 输入框和提交按钮 -->
    <div class="input-section">
      <input v-model="userInput" type="text" placeholder="请输入内容" class="input-box"/>
      <button @click="handleSubmit" class="submit-button" :disabled="isSubmitting">提交</button>
    </div>
    <div ref="linkSection" class="link-section" v-show="isLinkVisible">
      <div v-for="(url, index) in urls" :key="index">
        链接地址: <a :href="url" class="link">{{ urls }}</a>
      </div>
    </div>
  </div>
</template>

<script>
import {onBeforeUnmount, onMounted, ref} from 'vue';
import axios from "axios";
import {useRouter} from "vue-router";

export default {
  setup() {
    const router = useRouter();
    const videoElement = ref(null);
    const userInput = ref('');
    const audioElement = ref(null); // 音频元素的引用
    const linkSection = ref(null);
    const isLinkVisible = ref(false);
    let urls = ref([]); // 用于存储提取的URL

    let isPlaying = ref(false);
    let isSubmitting = ref(false);
    const errorMessage = ref(''); // 用于显示错误提示的状态

    const handleVideoLoadedData = () => {

    };

    // 处理音频播放完毕的逻辑
    const handleAudioEnded = () => {
      if (videoElement.value) {
        videoElement.value.currentTime = 0; // 重置视频到开始
        videoElement.value.play(); // 播放视频
      }
    };

    const handleSubmit = async () => {
      if (userInput.value) {
        try {
          // 设置提交状态为 true，清空之前的错误信息
          isSubmitting.value = true;
          errorMessage.value = '';

          console.log('用户输入的内容:', userInput.value);

          // 发送用户输入到服务器
          const response = await axios.post('https://test-wd-api.iwanshang.cloud/kma/gpt/atxb/aizhan/t1', {
            prompt: userInput.value // 将用户输入的数据发送到服务器
          });

          // 处理服务器响应
          console.log('服务器返回的数据:', response.data);
          if (response.data.code === 200) {
            const message = response.data.data;
            // 如果有的话提取url出来
            const regex = /\((https?:\/\/[^\s)]+)\)/g; // 匹配括号内的URL
            const matches = message.match(regex);
            if (matches) {
              const linkUrls = matches.map(match => match.replace(/[()]/g, ''));
              console.log('提取出来的url:', linkUrls);
              // 去除url后的新文本
              let cleanedText = message.replace(regex, '');
              // 替换[]符号
              cleanedText = cleanedText.replace(/\[([^\]]+)]/g, '$1');
              console.log('去除url数据的文本:', cleanedText);
              // 如果返回了多个url 不做跳转
              if (linkUrls.length > 1) {
                isLinkVisible.value = true;
                this.urls.values = linkUrls;
                // 将文本翻译为语音
                await testToAudio(cleanedText);
              } else {
                console.log('跳转到url:', linkUrls[0]);
                // 跳转地址将参数带过去
                const query = {
                  message: cleanedText, // 假设这是需要携带的参数
                  url: linkUrls[0]
                };
                await router.push({
                  name: 'VideoHumanJumpTest', // 或者直接写成 '/target' 的形式
                  query: query // 将参数作为查询字符串传递
                });
              }
            } else {
              // 将文本翻译为语音
              await testToAudio(message);
            }
          } else {
            console.error('服务器返回了非 200 的状态码:', response.data.code);
          }
        } catch (error) {
          // 捕获并处理错误
          console.error('请求出错:', error);
          errorMessage.value = '请求失败，请稍后重试。';
        } finally {
          // 重置用户输入与提交状态
          userInput.value = '';
          isSubmitting.value = false;
        }
      }
    };

    const testToAudio = async (message) => {
      // 将文本翻译为语音
      const audioResponse = await axios.post('https://test-wd-api.iwanshang.cloud/kma/gpt/audio/text2Audio', {
        text: message // 将翻译后的文本发送到服务器
      });

      console.log('语音数据:', audioResponse.data);
      if (audioResponse.data.code === 200 && audioResponse.data.audio) {
        const base64Audio = audioResponse.data.audio; // 修正为从 audioResponse 中获取 audio 数据

        // 设置音频元素的 src 属性并播放
        audioElement.value.src = `data:audio/wav;base64,${base64Audio}`;
        audioElement.value.play();

        // 播放视频并静音
        if (videoElement.value) {
          isPlaying.value = true;
          videoElement.value.muted = true; // 静音
          videoElement.value.loop = true; // 循环播放
          videoElement.value.play(); // 播放视频
        } else {
          console.error('视频元素未找到');
        }
      } else {
        console.error('未能获取到有效的音频数据');
      }
    }


    const handleVideoEnded = () => {
      isPlaying.value = false;
    };


    const togglePlay = () => {
      if (videoElement.value.paused || videoElement.value.ended) {
        videoElement.value.loop = true;
        videoElement.value.play();
        isPlaying.value = true;
      } else {
        videoElement.value.pause();
        isPlaying.value = false;
      }
    };

    const handleVideoTimeUpdate = () => {
      if (audioElement.value && !audioElement.value.paused) {
        // 如果音频正在播放，视频从 10 秒开始循环到结束
        if (videoElement.value.currentTime < 10) {
          videoElement.value.currentTime = 10; // 设定视频从 10 秒开始
        }
        if (videoElement.value.currentTime >= videoElement.value.duration) {
          videoElement.value.currentTime = 10; // 从 10 秒开始继续播放
        }
      } else {
        // 如果音频没有播放，从 0 到 10 秒循环
        if (videoElement.value.currentTime >= 9) {
          videoElement.value.currentTime = 0; // 重置到 0 秒
        }
      }
    };


    onMounted(() => {
      // 确保音频元素存在后添加事件监听器
      if (audioElement.value) {
        audioElement.value.addEventListener('ended', handleAudioEnded);
      }
      // 播放视频并静音
      if (videoElement.value) {
        videoElement.value.muted = true; // 静音
        videoElement.value.currentTime = 0; // 从 0 开始播放
        videoElement.value.play(); // 播放视频
        videoElement.value.addEventListener('timeupdate', handleVideoTimeUpdate);
      } else {
        console.error('视频元素未找到');
      }
    });

    onBeforeUnmount(() => {
      // 清理事件监听器
      if (videoElement.value) {
        videoElement.value.removeEventListener('timeupdate', handleVideoTimeUpdate);
      }
    });

    return {
      videoElement,
      audioElement,
      togglePlay,
      isPlaying,
      isSubmitting,
      errorMessage,
      handleVideoEnded,
      handleVideoLoadedData,
      handleVideoTimeUpdate,
      handleSubmit,
      testToAudio,
      userInput,
      linkSection,
      isLinkVisible,
      urls
    };
  },
};
</script>
<style scoped>
audio {
  display: none;
}

video {
  width: 100%;
  height: 100%;
  background-color: transparent; /* 设置透明背景 */
}

.digital-human {
  position: relative;
  width: 90vw; /* 使用相对宽度以适应各种设备 */
  max-width: 320px; /* 最大宽度，防止过大 */
  height: 60vh; /* 高度相对视口的高度 */
  max-height: 640px; /* 最大高度，防止过大 */
  background: transparent; /* 保持透明背景 */
  transition: transform 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}

canvas {
  //display: block;
  //margin: 0 auto;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* 保持视频背景透明 */
}

.play-pause-button {
  position: absolute;
  top: 10px; /* 距离容器顶部的距离 */
  left: 10px; /* 距离容器左侧的距离 */
  padding: 10px 20px; /* 内边距 */
  background-color: #007bff; /* 背景颜色 */
  color: white; /* 文本颜色 */
  border: none; /* 去除边框 */
  border-radius: 5px; /* 边框圆角 */
  cursor: pointer; /* 鼠标悬停时的指针样式 */
  outline: none; /* 去除点击时的轮廓 */
}

.mute-button {
  position: absolute;
  top: 55%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 50px;
  height: 50px;
  background-image: url('https://sjzz.ilhjy.cn/uimg/202405/14/1715651036930_3480.png');
  background-size: cover;
  background-position: center;
  cursor: pointer;
  animation: pulse 2s infinite; /* 添加脉冲动画 */
}

.play-pause-button:hover {
  background-color: #0056b3; /* 鼠标悬停时的背景颜色 */
}

.error-message {
  margin-left: 10px;
  color: red; /* 错误消息的颜色 */
  font-size: 14px; /* 字体大小 */
}

.input-box {
  padding: 10px;
  margin-bottom: 10px;
  width: 100%;
  max-width: 300px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

.submit-button {
  padding: 10px 20px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}

.link-section {
  margin-top: 20px;
}

.link {
  color: #3498db; /* 链接颜色 */
  font-size: 1.2rem;
  text-decoration: none; /* 移除下划线 */
  font-weight: bold;
}

.link:hover {
  color: #2980b9; /* 鼠标悬停时的颜色变化 */
  text-decoration: underline; /* 悬停时增加下划线 */
}
</style>